<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .Toptit {
            position: relative;
            display: flex;
            margin: auto;
            width: 1100px;
            height: 70px;
        }

        .Carouselchart {
            margin: auto;
            width: 100%;
            height: 480px;
        }

        .classification {
            margin: auto;
            width: 1100px;
            height: 80px;
        }

        .classification ul {
            cursor: pointer;
            display: flex;
            list-style-type: none;
        }

        .classification li {
            flex: 1;
        }

        .advertisement {
            width: 1100px;
            margin: auto;
        }

        .Hotsellingproducts {
            width: 1100px;
            margin: auto;
        }

        .Hotsellingproducts img {
            width: 263px;
            height: 263px;
        }

        .line {
            display: flex;
        }

        .CD {
            width: 263px;
            height: 382px;
            margin-right: 6px;
            text-align: center;
        }

        .CD a {
            font-size: 12px;
            text-decoration: none;
            color: #000;
        }

        .CD a:hover {
            text-decoration: underline;
        }

        .CD h2 {
            color: red;
            font-weight: lighter;
        }


        .navbar {
            position: fixed;
            top: 450px;
            right: 200px;
            width: 65px;
            height: 300px;
            padding: 20px;
            box-sizing: border-box;
        }

        .navbar div {
            width: 65px;
            height: 65px;
            border: 0.5px solid rgba(000, 0, 0, 0.4);
        }

        .navbar img {
            margin-left: 10px;
        }

        .navbar a {
            font-size: 12px;
            display: block;
            color: black;
            text-decoration: none;
            text-align: center;
        }

        .backTop {
            text-align: center;
            background-color: #000;
            color: white;
            display: none;
            height: 30px;
            width: 67px;
            border: 0.5px solid rgba(000, 0, 0, 0.4);
        }

        .backTop a {
            color: white;
        }

        .backTop:hover {
            cursor: pointer;
        }

        .shoppingcar:hover {
            cursor: pointer;

        }

        .Customerservice:hover {
            cursor: pointer;
        }
    </style>
    <link rel="stylesheet" href="css/css_en/dropdown.css">
    <link rel="stylesheet" href="css/css_en/slider.css">
</head>

<body>
    <div class="Toptit">
        <img src="images/images_en/商城标题.png" width="296px" height="43px">
        <div style="width: 770px;"></div>
        <img src="images/images_en/购物车.png" width="45px" height="45px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <div class="image-container">
            <img src="images/images_en/touxiang.jpg" width="45px" height="45px" style="border-radius: 50%;">
            <div class="dropdown-menu">
                <a href="#">我的订单</a>
                <a href="#"> 我的优惠券</a>
                <a href="#">我的收货地址</a>
                <a href="#">网易云音乐首页</a>
                <hr>
                <a href="#">退出</a>
            </div>
        </div>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const imageContainer = document.querySelector('.image-container');
                const dropdownMenu = document.querySelector('.dropdown-menu');

                imageContainer.addEventListener('mouseenter', function () {
                    dropdownMenu.style.display = 'block';
                });

                imageContainer.addEventListener('mouseleave', function () {
                    dropdownMenu.style.display = 'none';
                });
            });

        </script>
    </div>
    <div class="Carouselchart">
        <img src="http://p4.music.126.net/X3qNfiVkkPbiQ-Viz3zIhw==/109951168544789603.jpg" class="slide" alt="Image 1">
        <img src="http://p3.music.126.net/7CjmfeLij9JKPIlPwI_Odw==/109951168521583367.jpg" class="slide" alt="Image 2">
        <img src="http://p3.music.126.net/l9UiTLVPahHKboalK0NK5A==/109951168443095079.jpg" class="slide" alt="Image 3">
        <img src="http://p4.music.126.net/2xUf4K8AGT2OQsMOT5tjjA==/109951168429528626.jpg" class="slide" alt="Image 4">
        <img src="http://p4.music.126.net/0n7ddLBFhbEuZzGxeXCzXw==/109951168282525607.jpg" class="slide" alt="Image 5">
        <img src="http://p3.music.126.net/cYNFhBagxazXB9BLHoaoHA==/109951168299418605.jpg" class="slide" alt="Image 6">

        <!-- 控制按钮 -->
        <a href="#" class="control prev">
            < </a>
                <a href="#" class="control next"> > </a>
    </div>
    <script src="js/js_en/Mall-en/slider.js"></script>
    <div class="classification">
        <ul>
            <li style="border-right: 0.5px solid rgba(204, 204, 204, 0.3);">
                <img src="http://p4.music.126.net/tKMAm5OvR-2lAj7dnEOhsg==/18623527952924939.jpg">
                <a>IP周边</a>
            </li>
            <li style="border-right: 0.5px solid rgba(204, 204, 204, 0.3);">
                <img src="http://p3.music.126.net/PzH4QQKE5R97J9f2V-SvqQ==/18585045045959929.jpg">
                <a>数码影音</a>
            </li>
            <li style="border-right: 0.5px solid rgba(204, 204, 204, 0.3);">
                <img src="http://p3.music.126.net/UKhDHWnEMmoOo27PQmDPbA==/19117208672446378.jpg">
                <a>热销商品</a>
            </li>
            <li>
                <img src="images/images_en/商城.png">
                <a>云贝商城</a>
            </li>
        </ul>
    </div>
    <div class="advertisement">
        <div style="margin-bottom: 10px;">
            <img src="http://p4.music.126.net/kQqf40w-NFhLXIksQPgSwg==/109951164207184328.jpg" alt=""
                style="margin-right: 8px;">
            <img src="http://p4.music.126.net/QtFPuBnRPFatpnGsyNJYhw==/109951163973446450.jpg" alt="">
        </div>
        <div>
            <img src="images/images_en/广告底.png">
        </div>
    </div>
    <div class="Hotsellingproducts">
        <h2>热卖商品</h2>
        <div class="line">
            <div class="CD">
                <img src="http://p4.music.126.net/XjsAppA2WHC6a3vxtWdedg==/109951163293163138.jpg?param=440y440">
                <a href="#">邱胜翊(王子)Attention!听好1CD</a>
                <h2>￥69</h2>
            </div>
            <div class="CD">
                <img src="http://p3.music.126.net/BqlTireCmLWQYHrvrbpFqQ==/109951163293175565.jpg?param=440y440">
                <a href="#">林俊杰《伟大的渺小》1CD</a>
                <h2>￥85</h2>
            </div>
            <div class="CD">
                <img
                    src="http://p3.music.126.net/tqME2w-oF4FDlrFKV15QFQ==/109951163345406651.jpg?param=263x9999&quality=75">
                <a href="#">《青云志》电视剧原声带 1CD</a>
                <h2>￥90</h2>
            </div>
            <div class="CD">
                <img
                    src="http://p4.music.126.net/-GabY3F14cqSOhhI1GOuAA==/109951163345410402.jpg?param=263x9999&quality=75">
                <a href="#">《老男孩》电视剧原声带 2CD</a>
                <h2>￥94</h2>
            </div>
        </div>
        <div>

        </div>
        <div class="line">
            <div class="CD">
                <img
                    src="http://p4.music.126.net/BbvYYzt7C8Wp-KIqPsM-wA==/109951163345432051.jpg?param=263x9999&quality=75">
                <a href="">《南方有乔木》电视剧原声带 2CD</a>
                <h2>￥88</h2>
            </div>
            <div class="CD">
                <img
                    src="http://p4.music.126.net/mmgC9JT4eXJxb4AzjINXog==/109951163345471702.jpg?param=263x9999&quality=75">
                <a href="">《杉杉来了》电视剧原声带</a>
                <h2>￥90</h2>
            </div>
            <div class="CD">
                <img
                    src="http://p4.music.126.net/HO3NUJBpXzeopsPOyizDLw==/109951163345482444.jpg?param=263x9999&quality=75">
                <a href="">《好先生》电视剧原声带</a>
                <h2>￥90</h2>
            </div>
            <div class="CD">
                <img
                    src="http://p4.music.126.net/qr6e9pzQ8g-UY_daibzK_A==/109951163345492198.jpg?param=263x9999&quality=75">
                <a href="">《择天记》电视剧原声带</a>
                <h2>￥90</h2>
            </div>
        </div>
        <div class="line">
            <div class="CD">
                <img
                    src="http://p4.music.126.net/uqGi71iywVzbocCJp5EPiw==/109951163345492361.jpg?param=263x9999&quality=75">
                <a href="">《亲爱的翻译官》电视剧原声带</a>
                <h2>￥90</h2>
            </div>
            <div class="CD">
                <img
                    src="http://p4.music.126.net/rgHF-XslVxU1uwxN5Gd13w==/109951163345508220.jpg?param=263x9999&quality=75">
                <a href="">柯有伦《飞》</a>
                <h2>￥69</h2>
            </div>
            <div class="CD">
                <img
                    src="http://p3.music.126.net/aESbdK_yZxe3GX7UVP3bxQ==/109951163346318943.jpg?param=263x9999&quality=75">
                <a href="">朴树《猎户星座》(版本二)</a>
                <h2>￥68</h2>
            </div>
            <div class="CD">
                <img
                    src="http://p4.music.126.net/k6sqjW-cC1PSzbxdfk6XCw==/109951163346331168.jpg?param=263x9999&quality=75">
                <a href="">朴树《猎户星座》(版本一)</a>
                <h2>￥68</h2>
            </div>
        </div>
        <div class="line">
            <div class="CD">
                <img
                    src="http://p4.music.126.net/KNOAwbLDVM3AC8jwutSX2A==/109951164119783888.jpg?param=263x9999&quality=75">
                <a href="">杭盖乐队《回到你身旁》实体唱片黑胶大碟LP</a>
                <h2>￥217</h2>
            </div>
            <div class="CD">
                <img
                    src="http://p4.music.126.net/yrSAcEP1GNFJ4J1a9k2kwg==/109951164119857866.jpg?param=263x9999&quality=75">
                <a href="">低音提琴名演天碟-低音提琴演奏家弗兰克·杜萨《Father Time牛筋王1》12寸LP</a>
                <h2>￥217</h2>
            </div>
            <div class="CD">
                <img
                    src="http://p3.music.126.net/FHv6QCYznJJAcEucTqoTvg==/109951164119859966.jpg?param=263x9999&quality=75">
                <a href="">爵士钢琴二重奏发烧天碟-美国爵士钢琴家鲍勃·迪根《Chartreuse荨麻酒》12寸LP</a>
                <h2>￥217</h2>
            </div>
            <div class="CD">
                <img
                    src="http://p3.music.126.net/ezOHCKOoR2ADebxmHVC5Jw==/109951164119862493.jpg?param=263x9999&quality=75">
                <a href="">爵士钢琴三重奏发烧天碟-南非爵士乐始祖阿布杜拉·伊布拉辛《Banyana班亚纳》12寸LP</a>
                <h2>￥217</h2>
            </div>
        </div>
        <div class="line">
            <div class="CD">
                <img
                    src="http://p3.music.126.net/4QmODYVT5buVDC1IhP6yrA==/109951164119870855.jpg?param=263x9999&quality=75">
                <a href="">爵士鼓名演发烧天碟-HIFI爵士鼓王埃文·琼斯《Youngblood爵士鼓王》12寸LP</a>
                <h2>￥217</h2>
            </div>
            <div class="CD">
                <img
                    src="http://p3.music.126.net/4yifuX65G9SQpWA2ODGUxw==/109951164119876334.jpg?param=263x9999&quality=75">
                <a href="">爵士吉他发烧天碟-匈牙利音乐家阿提拉·佐勒《Common Cause共同追求》12寸LP</a>
                <h2>￥217</h2>
            </div>
            <div class="CD">
                <img
                    src="http://p3.music.126.net/z6wQK0Py_csmcsQ_-HcKOQ==/109951164119879359.jpg?param=263x9999&quality=75">
                <a href="">爵士萨克斯现场天碟实录-次中音萨克斯演奏家阿尔奇·薛普《Steam雾》12寸LP</a>
                <h2>￥217</h2>
            </div>
        </div>
    </div>
    <div class="navbar">
        <div>
            <a style="margin-top: 20px;">100%</a>
            <a>正品</a>
        </div>
        <div>
            <a style="margin-top: 20px;">七天无理</a>
            <a>由退货</a>
        </div>
        <div class="shoppingcar">
            <img src="images/images_en/购物车.png" width="40px" height="40px">
            <a>购物车</a>
        </div>
        <div class="Customerservice">
            <img src="images/images_en/客服.jpg" width="40px" height="40px">
            <a>客服</a>
        </div>
        <button class="backTop"><a>^</a><a>TOP</a></button>

    </div>
    <script src="js/js_be/backTop1.js"></script>
</body>

</html>